<template >
    <!--连接跳转-->

    <a v-bind:href="url">点击去哪里</a>
    <button @click="onUrl()">跳转到B站</button>
    <img v-bind:src="imgsrc" alt="" width="200px" height="200px">
    <button @click="imgbtn">点击更改图片</button>
    <p v-bind:id="id">v-bind对css样式的调整</p>
    <button @click="btnid">点击更改字体的颜色</button>
    <p :id="id">这种缩写的方式叫语法糖</p>
</template>
<script>
export default {
    data() { 
        return { 
            //动态绑定 需要使用v-bind 指令
            //语法 v-bind:属性名='变量名'
            url: 'https://www.baidu.com/',
            imgsrc: 'http://p9-dcd-sign.byteimg.com/motor-article-img/a6c999a0396041ceb13ab329eaff66f1~tplv-f042mdwyw7-original:640:0.image?rk3s=87dec8b9&x-expires=1732087390&x-signature=n6tsMDjaUf7Uc0hhJW%2Bo%2BiuumyE%3D&psm=motor.pc_content.api',
            id:"d1"
        }
    },
    methods: {
        onUrl() { 
            this.url = 'https://www.bilibili.com/'
        },
        imgbtn() { 
            this.imgsrc ="https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/194362/34/51780/153716/67321311F2dc78899/4763426efc99e7d0.jpg"
        },
        btnid() { 
            this.id="d2"
        }
    }
    
}
</script>
<style>
    /* 加载css样式 */
    #d1{
        color: rgb(7, 69, 44);
    }
    #d2{
        background-color: pink;
        /* 字体放大18 */
        font-size: 18px;
        /* 字体加粗 */
        font-weight: 700;
    }

</style>